import { widgetManager } from '@/common/managers';
import { useWidgetStore } from '@/common/store';
import { i18n } from '@/common/utils';
import { LeftPanelMenu } from '@/layouts/LeftPanels';
import { Box } from 'nextcae-base/src/dialogs/component/Box';
import { useEffect, useMemo } from 'react';

export function LeftDialogs({ setLeftSplitterSize }) {
  const { modalId, selectId } = useWidgetStore();
  const onClose = () => {
    console.log('onClose');
    widgetManager.setModalId('');
  };
  useEffect(() => {
    const item = LeftPanelMenu.find((item) => item.id === selectId); // 找到对应的菜单项
    setLeftSplitterSize(item?.boxWidth ?? 280);
  }, [selectId]);
  const modals = useMemo(() => {
    const item = LeftPanelMenu.find((item) => item.id === modalId); // 找到对应的菜单项
    return item ? (
      <Box
        width={(item?.boxWidth ?? 320) + 'px'}
        onClose={onClose}
        title={i18n.t(item.label)}
        bodyClassName='min-h-[30vh]'
        titleIcon={item.icon}>
        {item?.create(onClose)}
      </Box>
    ) : (
      <></>
    );
  }, [modalId]);
  useEffect(() => {
    const item = LeftPanelMenu.find((item) => item.id === selectId); // 找到对应的菜单项
    setLeftSplitterSize(item?.boxWidth ?? 280);
  }, [selectId]);
  return modals;
}
